<template>
  <div class="yd-tab hd-scrollbar">
    <ul class="yd-tab-nav" :style="{color:'#FF5E53'}">
      <slot></slot>
    </ul>
  </div>
</template>
<script>
/**
 * 慧鼎组件-滚动导航头部,配合hdScrollPanel使用
 * @依赖
 *  npm install --save vue-scrollto
 * 使用方法
 * <hd-scroll-bar v-model="isSelected">
      <hd-scroll-bar-item link="0">选项1</hd-scroll-bar-item>
      <hd-scroll-bar-item link="1">项目2</hd-scroll-bar-item>
      <hd-scroll-bar-item link="2">项目3</hd-scroll-bar-item>
      <hd-scroll-bar-item link="3">项目4</hd-scroll-bar-item>
    </hd-scroll-bar>
    <hd-scroll-panel v-model="isSelected" @change="onChange">
      <hd-scroll-panel-item :link="index" v-for="(item, index) in 4" :key="index">
        <div>标签{{index+1}}</div>
        <div v-for="(item, index) in 3" :key="index+1">
          <div>
            <img src="http://img.jgzyw.com:8000/d/img/tpmx/2013/04/02/21/20130402212552716.jpg" width="100%">
          </div>
        </div>
      </hd-scroll-panel-item>
    </hd-scroll-panel>
 *
 * 1. hd-scroll-bar hd-scroll-panel 绑定 v-model, v-model格式为
      isSelected: {
        link: '0' // 导航与面板的绑定纽带
      }
 * 2. 设置 hd-scroll-bar-item hd-scroll-panel-item link 属性, 相同为一组
 * 3. 设置 启动方法 @change="onChange" 方法内容
 * onChange(val) {
      this.isSelected = val
    }
 */
export default {
  name: 'hd-scroll-bar',
  data() {
    return {
    }
  },
  props: {
    value: {} // 接收 v-model 值
  }
}
</script>
<style lang="stylus" scoped>
.hd-scrollbar
  position sticky
  top 0
</style>

